<pf-wizard
     wizard-title="Import YAML / JSON"
     on-cancel="$ctrl.close()"
     on-finish="$ctrl.close()"
     hide-sidebar="true"
     next-title="$ctrl.nextButtonTitle"
     next-callback="$ctrl.nextCallback"
     current-step="$ctrl.currentStep"
     wizard-done="$ctrl.wizardDone"
     on-step-changed="$ctrl.stepChanged(step)"
     step-class="order-service-wizard-step">
  <pf-wizard-step
       step-title="YAML / JSON"
       step-id="file"
       step-priority="1"
       substeps="false"
       ok-to-nav-away="true"
       allow-click-nav="false"
       next-enabled="!$ctrl.importForm.$invalid">
    <div class="wizard-pf-main-inner-shadow-covers">
      <div class="order-service-config">
        <div class="wizard-pf-main-form-contents">
          <form name="$ctrl.importForm">
            <from-file is-dialog="true" project="$ctrl.project"></from-file>
          </form>
        </div>
      </div>
    </div>
  </pf-wizard-step>
  <pf-wizard-step
       wz-disabled="{{!$ctrl.template}}"
       step-title="Template Configuration"
       step-id="template"
       step-priority="2"
       substeps="false"
       ok-to-nav-away="true"
       allow-click-nav="false"
       next-enabled="!$ctrl.templateForm.$invalid">
    <div class="wizard-pf-main-inner-shadow-covers" ng-if="$ctrl.template">
      <div class="order-service-details">
        <div class="order-service-details-top" ng-class="{'order-service-details-top-icon-top': ($ctrl.vendor || ($ctrl.docUrl || $ctrl.supportUrl))}">
          <div class="service-icon">
            <span ng-if="$ctrl.image" class="image"><img ng-src="{{$ctrl.image}}" alt=""></span>
            <span ng-if="!$ctrl.image" class="icon {{$ctrl.iconClass}}" aria-hidden="true"></span>
          </div>
          <div class="service-title-area">
            <div class="service-title">
              {{$ctrl.template | displayName}}
            </div>
            <div ng-if="$ctrl.vendor" class="service-vendor">
              {{$ctrl.vendor}}
            </div>
            <div class="order-service-tags">
              <span ng-repeat="tag in $ctrl.template.metadata.annotations.tags.split(',')" class="tag">
                {{tag}}
              </span>
            </div>
            <ul ng-if="$ctrl.docUrl || $ctrl.supportUrl" class="list-inline order-service-documentation-url">
              <li ng-if="$ctrl.docUrl" >
                <a ng-href="{{$ctrl.docUrl}}" target="_blank" class="learn-more-link">View Documentation <i class="fa fa-external-link" aria-hidden="true"></i></a>
              </li>
              <li ng-if="$ctrl.supportUrl" >
                <a ng-href="{{$ctrl.supportUrl}}" target="_blank" class="learn-more-link">Get Support <i class="fa fa-external-link" aria-hidden="true"></i></a>
              </li>
            </ul>
          </div>
        </div>
        <div class="order-service-description-block">
          <p ng-bind-html="($ctrl.template | description | linky : '_blank') || 'No description provided.'" class="description"></p>
        </div>
      </div>
      <div class="order-service-config">
        <div class="wizard-pf-main-form-contents">
          <div class="osc-form">
            <alerts alerts="$ctrl.alerts"></alerts>
            <form name="$ctrl.templateForm">
              <process-template ng-if="$ctrl.template" project="$ctrl.selectedProject" template="$ctrl.template" alerts="$ctrl.alerts" is-dialog="true"></process-template>
            </form>
          </div>
        </div>
      </div>
    </div>
  </pf-wizard-step>
  <pf-wizard-step
       step-title="Results"
       step-id="results"
       step-priority="3"
       substeps="false"
       ok-to-nav-away="true"
       allow-click-nav="false"
       prev-enabled="false">
    <div class="wizard-pf-main-inner-shadow-covers">
      <div class="order-service-config">
        <div class="wizard-pf-main-form-contents">
          <!-- We don't want the directive to render until the results step is shown, this makes sure processed template info gets pulled from cache correctly -->
          <next-steps ng-if="$ctrl.currentStep === 'Results'" project="$ctrl.selectedProject"
                      project-name="$ctrl.selectedProject.metadata.name"
                      login-base-url="$ctrl.loginBaseUrl"
                      on-continue="$ctrl.close"
                      show-project-name="$ctrl.showProjectName"
                      kind="$ctrl.kind"
                      name="$ctrl.name"
                      action-label="$ctrl.actionLabel">
          </next-steps>
        </div>
      </div>
    </div>
  </pf-wizard-step>
</pf-wizard>
